<template>
  <div id="home">
    <div id="home_header">
      <headerc>
        <template #left>
          <img src="../../../static/images/home/home12.png" alt="" />
        </template>
        <template #center>
          <input type="text" id="searchInput" @focus="getfocus" />
          <img
            src="../../../static/images/tabbar/search.png"
            class="search_icon"
          />
        </template>
        <template #right>
          <div class="scanimg">
            <img src="../../../static/images/home/home03.png" />
          </div>
          <span class="scantxt">扫一扫</span>
        </template>
      </headerc>
      <div class="white">
        <div class="banner">
          <img src="../../../static/images/home/home02.png" alt="" />
        </div>
      </div>
    </div>

    <div class="mall_nav">
      <router-link
        :to="item.path"
        v-for="(item, index) in mallNav"
        :key="index"
      >
        <img :src="item.imgUrl" alt="" />
        <span>{{ item.title }}</span>
      </router-link>
    </div>

    <div class="home_banner">
      <img src="../../../static/images/home/home08.png" alt="" />
    </div>

    <div class="home_goods" ref="list">
      <h2>好物推荐</h2>
      <goods :goodsInfo="goodsArr"></goods>
    </div>

    <div id="null"></div>
    <router-view></router-view>

    <tabbar></tabbar>
    <router-view></router-view>
    <van-icon name="back-top" id="back-top" v-show="back_show" @click="toTop" />
  </div>
</template>

<script>
import headerc from "@/components/header/header";
import goods from "@/components/goods/goods";
import tabbar from "../../components/tabbar/tabbar";
import { getProduct } from "@/request/api.js";
export default {
  components: {
    headerc,
    goods,
    tabbar,
  },

  data() {
    return {
      mallNav: [
        {
          imgUrl: "../../../static/images/home/home24.png",
          title: "好物推荐",
          path: "/goodthing",
        },
        {
          imgUrl: "../../../static/images/home/home25.png",
          title: "树享周榜",
          path: "/shop",
        },
        {
          imgUrl: "../../../static/images/home/home26.png",
          title: "热门店铺",
          path: "/myorder",
        },
        {
          imgUrl: "../../../static/images/home/home27.png",
          title: "一分好礼",
          path: "/detail",
        },
        {
          imgUrl: "../../../static/images/home/home28.png",
          title: "商品分类",
          path: "/category",
        },
      ],
      goodsArr: [],
      back_show: false,
    };
  },
  mounted() {
    document.addEventListener("scroll", this.needToTop, true); //滚动事件监听
    getProduct().then((res) => {
      this.goodsArr = res.shopDataArr;
    });
  },
  methods: {
    getfocus() {
      this.$router.push("/searchlist");
    },
    needToTop() {
      // 获取被卷去头部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(scrollTop);
      // 获取元素距离顶部的距离
      let eleTop = this.$refs["list"].offsetTop;
      // 如果页面被卷去的部分大于了元素距离顶部的距离就该显示图标了
      if (scrollTop > eleTop) {
        this.back_show = true;
      }
    },
    toTop() {
      let timer = setInterval(() => {
        // 获取被卷去头部的距离
        let scrollTop =
          document.documentElement.scrollTop ||
          window.pageYOffset ||
          document.body.scrollTop;
        // 滚动速度
        let speed = Math.floor(-scrollTop / 5);
        document.body.scrollTop = scrollTop + speed;
        if (scrollTop <= 0) {
          clearInterval(timer);
          this.back_show = false;
        }
      }, 20);
    },
  },
  destroyed() {
    document.removeEventListener("scroll", this.needToTop, true);
  },
};
</script>

<style lang="less"  scoped>
#home {
  background-color: #f6f6f6;
  #home_header {
    height: 554px;
    background-color: #ff384f;
    position: relative;
    border: none;
    .title {
      img {
        width: 48px;
        height: 50px;
      }
    }

    #searchInput {
      height: 47px;
    }
    .search_icon {
      top: 7px;
    }
  }
  .white {
    height: 220px;
    width: 100%;
    background-color: #f6f6f6;
    position: absolute;
    bottom: -1px;
    border-radius: 40px 40px 0px 0px;
    .banner {
      position: absolute;
      top: -146px;
      left: 40px;
      img {
        width: 670px;
        height: 340px;
      }
    }
  }
  .mall_nav {
    display: flex;
    font-size: 24px;
    a {
      flex: 1;
      span {
        display: block;
        margin-top: 5px;
      }
      img {
        width: 102px;
        height: 102px;
      }
    }
  }
  .home_banner {
    margin-top: 42px;
    img {
      width: 673px;
      height: 130px;
    }
  }
  .home_goods {
    margin: 36px 40px 0 40px;
    h2 {
      text-align: left;
      color: #000000;
      font-size: 32px;
      margin-bottom: 20px;
    }
  }
}

#null {
  height: 100px;
  background-color: #f6f6f6;
}
#back-top {
  position: fixed;
  top: 80%;
  right: 5px;
  z-index: 999;
}
</style>